<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" label-position="top" @submit.native.prevent>
    <div class="form-title">
      {{ $t('login.component.3d3141e6a01e221700329fae9ee88f3d') }}
    </div>
    <el-form-item label="" prop="username">
      <el-input v-if="ruleResult.username.edit" ref="userInput" v-model.trim="ruleForm.username" :disabled="loading" :placeholder="$t('login.component.127d22025cfbb00adb1083b07a68b327')" @keyup.enter.native="continueClick" />
      <show-item v-else :content="ruleForm.username" @click.native="editClick('username')" />
    </el-form-item>
    <el-form-item v-if="passwordShow" label="" prop="password">
      <el-input ref="passwordInput" v-model.trim="ruleForm.password" :type="passwordType" :placeholder="$t('login.component.4d7d55831d49cad6e6b29324955ae6bf')" @keyup.enter.native="continueClick">
        <i slot="suffix" :style="{ color: passwordType === '' ? '#243858' : '#C1C7D0' }" class="wk wk-icon-eye-solid" @click="passwordType = passwordType === '' ? 'password' : ''" />
      </el-input>
    </el-form-item>
    <div class="handle-bar">
      <el-button :loading="loading" :disabled="loading" type="primary" @click="continueClick">
        {{ loginBtnName }}
      </el-button>
    </div>
    <other-login/>
  </el-form>
</template>

<script>
import ShowItem from './ShowItem'
import OtherLogin from './OtherLogin.vue' 

import { debounce } from 'throttle-debounce'
import { isArray } from '@/utils/types'
import LoginMixin from './LoginMixin'
import WechatLoginMixin from '../../../wechat/mixins/Login'
import { removeAuth } from '@/utils/auth'
export default {
  // 密码登录
  name: 'LoginByPwd',

  components: {
    ShowItem,
    OtherLogin
  },

  mixins: [LoginMixin, WechatLoginMixin],

  props: {
    username: String
  },

  data() {
    const validateUsername = (rule, value, callback) => {
      if (!this.loading) {
        callback()
      } else if (value === '') {
        callback(new Error(this.$t('login.component.cd28cdd0452dceb5b19000031f8b36a7')))
      } else {
        callback()
      }
    }

    return {
      loading: false,
      ruleForm: {
        username: '',
        password: ''
      },
      ruleResult: {
        username: {
          validate: false,
          edit: true
        },
        password: {
          validate: false,
          edit: false
        }
      },
      rules: {
        username: [
          { required: true, message: this.$t('login.component.b821400e145c6e345bd7f6c26ed64108'), trigger: 'change' },
          { validator: validateUsername, trigger: '' }
        ],
        password: [{ required: true, message: this.$t('login.component.7f2db0772d406b4a16f8dd8cb770a987'), trigger: 'change' }]
      },
      passwordType: 'password'
    }
  },

  computed: {
    passwordShow() {
      return !this.ruleResult.username.edit && this.ruleResult.username.validate
    },
    loginBtnName() {
      return this.passwordShow ? this.$t('login.component.2cefb6aa600396ee62605baa55610ee4') : this.$t('login.component.759491445c97dee40cb09f796353bf59')
    }
  },

  watch: {
    ruleForm: {
      handler() {
        this.$nextTick(() => {
          this.changeFormState()
        })
      },
      deep: true
    },

    passwordShow() {
      if (this.passwordShow) {
        this.$nextTick(() => {
          this.$refs.passwordInput.focus()
        })
      }
    },

    username: {
      handler() {
        this.ruleForm.username = this.username
        // ONLY FOR TEST
        // this.ruleForm.username = '18271677534'
        // this.ruleForm.password = '123456a'
      },
      immediate: true
    },

    'ruleForm.username': {
      handler(val) {
        this.$emit('update:username', val)
      }
    }
  },

  created() {
    // 允许进入登录页面  1005 需要完善信息 不能清除登录信息
    if (!window.accessLogin) {
      removeAuth()
    }
    this.debouncedHandleLogin = debounce(300, this.handleLogin)
  },

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * 继续
     */
    continueClick() {
      this.loading = true
      this.$refs.ruleForm.validate(async valid => {
        this.loading = false
        await this.changeFormState()
        if (this.ruleResult.username.validate) {
          if (!this.ruleResult.password.validate) {
            this.ruleResult.username.edit = false
          } else {
            this.loading = true
            this.$store
              .dispatch('Login', this.ruleForm)
              .then(res => {
                this.loading = false
                const resData = res.data
                // 如果是数组 要区分不同版本登录
                if (isArray(resData)) {
                  this.$emit('toggle', 'multiple', resData, this.ruleForm)
                } else if (resData.hasOwnProperty('companyList')) {
                  this.$emit('toggle', 'multiple', resData.companyList, this.ruleForm)
                } else {
                  this.$router.push({ path: this.redirect || '/oa-front' })
                }
              })
              .catch(() => {
                this.loading = false
              })
          }
        }
        return false
      })
    },

    /**
     * 编辑
     */
    editClick(prop) {
      this.ruleResult[prop].edit = !this.ruleResult[prop].edit
      this.ruleResult.password.validate = false
      if (prop === 'username' && this.ruleResult[prop].edit) {
        this.$nextTick(() => {
          this.$refs.userInput.focus()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../style/index.scss';

.wx-login {
  margin-top: 8px;
  text-align: center;
}
</style>
